<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="visible"
    size="800px"
    title="详细信息"
    :with-header="false"
    @close="handleClose"
  >
    <div class="export-drawer">
      <div class="export-header">
        <div class="export-name">批量导出</div>
        <el-button @click="handleClose">关闭</el-button>
      </div>
      <div class="export-content">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="选择街道">
            <el-select
              v-model="formData.streetId"
              style="width: 300px"
              clearable
              placeholder="请选择街道"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div class="" style="padding-left: 12px">
            <el-checkbox
              v-model="isAll"
              label="全选"
              @change="handleAllChange"
            />
            <el-checkbox-group
              v-model="selectedColumns"
              @change="handleSelectedChange"
            >
              <el-checkbox
                v-for="item in exportHeader"
                style="width: 20%"
                :key="item.prop"
                :label="item.label"
                :value="item.prop"
              />
            </el-checkbox-group>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="export-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { streetsList } from "@/api/index";
import { exportHeader } from "../config";
const emit = defineEmits(["close", "export"]);
const visible = ref(false);
const isAll = ref(false);
const stationList = ref([]);
const selectedColumns = ref([]);
const formData = ref({
  streetId: null,
});
const tableHeaderList = computed(() => {
  return exportHeader.filter((item) => !["全选"].includes(item.label));
});
const handleAllChange = (val) => {
  if (val) {
    selectedColumns.value = tableHeaderList.value.map((item) => item.prop);
  } else {
    selectedColumns.value = [];
  }
};
const handleSelectedChange = (val) => {
  console.log(val, "val");
  if (val.length === tableHeaderList.value.length) {
    isAll.value = true;
  } else {
    isAll.value = false;
  }
};
onMounted(() => {
  streetsList({}).then((res) => {
    if (res.code == 0) {
      stationList.value = res.data || [];
    }
  });
  isAll.value = true;
  handleAllChange(true);
});
const handleClose = () => {
  visible.value = false;
  emit("close");
};
const openDrawer = () => {
  visible.value = true;
};
const handleExport = () => {
  let columns = tableHeaderList.value
    .filter((item) => selectedColumns.value.includes(item.prop))
    .map((item) => {
      return {
        label: item.label,
        prop: item.prop,
      };
    });
  emit("export", {
    streetId: formData.value.streetId,
    columns: JSON.stringify(columns),
  });
};

defineExpose({
  openDrawer,
});
</script>
